<template>
  <div id="app">
    <el-container>
      <!-- header -->
      <el-header>     
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"   text-color="#9292a6" router >
          <el-row :gutter="20">
            <el-col :span="2"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar> </el-col>
            <el-col :span="4" class="logotext">简易云盘</el-col>
            <el-col :span="2" class="navText"><el-menu-item index="/" style="font-size: 28px;">首页</el-menu-item></el-col>
            <el-col :span="3" class="navText"><el-menu-item index="/file/all" style="font-size: 25px;" :disabled="disable">文件管理</el-menu-item></el-col>
            <el-col :span="3" class="navText"><el-menu-item index="/message"  style="font-size: 25px;" :disabled="disable">消息中心<el-badge :value="message" v-if="message>0" class="item"/></el-menu-item></el-col>
            <el-col :span="4" class="navText"><el-menu-item index="/center/person" style="font-size: 25px;" :disabled="disable">个人中心</el-menu-item></el-col>
            <el-col :span="2" class="navText"><el-menu-item index="/trade" style="font-size: 10px;" >Trade</el-menu-item></el-col>
            <el-col :span="2"  class="loginCoin" v-show="user===null"><el-menu-item index="/login"><i class="el-icon-user" style="position: fixed; padding-top: 6px;">登录</i></el-menu-item></el-col>
            <el-col :span="2"   v-show="user!==null"><el-menu-item ><span>欢迎你，{{user}}</span></el-menu-item></el-col>
          </el-row>
        </el-menu>
      </el-header>
      <!-- main -->
      <el-main><router-view/></el-main>
    </el-container>

  </div>
</template>
<script>
 import axios from 'axios'
  export default {  
    
    data() {
      return {
        message:0,
        activeIndex: '1',
        squareUrl: require("./assets/pc/touxiang.png"),       
        // user:localStorage.getItem("nickname"),
        // disable:this.disable=localStorage.getItem("nickname")?false:true,
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },   
        
    },
    computed:{
      user(){
       return localStorage.getItem("nickname")
      },
      disable(){
        return localStorage.getItem("nickname")?false:true
      }
      
    },
    mounted(){
      if(localStorage.getItem("email")!==null){
        axios.get(`/api/getInfo?email=${localStorage.getItem("email")}`).then(
      response=>{
        if(response.data.code==200){
          if(localStorage.getItem("nickname")!==response.data.data.userInfo.nickName){
            localStorage.setItem("nickname",response.data.data.userInfo.nickName)
          }
        }else{
          localStorage.clear("email")
          localStorage.clear("nickname")
          this.$router.push('/login')
          this.$message.error("昵称显示失败")
        }
      },
      error=>{
        this.$message.error("昵称显示失败");
        console.log(error.$message)
      }
    )
    axios.get(`/api/getAllMessage?email=${localStorage.getItem("email")}`).then(
      response=>{
          if(response.data.code===200){
            this.message = response.data.data.length
          }else{
            this.$message.error(response.data.message)
          }
      }
    )
  }
      }

    }
  
</script>
<style>
@import './font/google.css';
.el-submenu__title:focus, .el-submenu__title:hover{  
  outline: 0 !important;  
  color: #fff !important;  
  background: none !important;  
} 

.el-menu-item:hover{  
  outline: 0 !important;  
  color: #ffd04b !important;  
  background: none;
}  
.navText{
  font-family: 'ZCOOLKuaiLe-Regular';
  font-size: 20px;
}
.logotext{
  color: #409EFF;
  padding-top: 15px;
  font-family: 'ZCOOLKuaiLe-Regular';
  font-size: 30px;
}
.loginCoin{
  padding-top: 10px;
}
</style>
